<template>
  <div class="container mt-3">
    <section class="pt-5 pb-5 mx-3">
      <div class="row justify-content-between mt-5">
        <img src="@/assets/img/help_bg.png" class="mb-5" />
        <div class="row" v-loading="pending">
          <div class="col-md-6">
            <el-form :model="helpFormData" class="cf">
              <m-form-item
                required
                label="Nombre"
                label-width="80px"
                :span="24"
                prop="name"
              >
                <m-input v-model="helpFormData.name" />
              </m-form-item>
              <m-form-item
                class="mt-2"
                required
                label="Teléfono"
                label-width="80px"
                :span="24"
                prop="phoneNo"
              >
                <m-input v-model="helpFormData.phoneNo" />
              </m-form-item>
              <m-form-item
                class="mt-2"
                required
                label="Contenido"
                label-width="80px"
                :span="24"
                prop="content"
              >
                <m-input
                  type="textarea"
                  maxlength="300"
                  v-model="helpFormData.content"
                />
              </m-form-item>
            </el-form>
          </div>
          <div class="col-md-6">
            <el-form :model="helpFormData" class="cf">
              <m-form-item
                required
                label="Correo"
                label-width="80px"
                :span="24"
                prop="email"
              >
                <m-input v-model="helpFormData.email" />
              </m-form-item>
            </el-form>
            <el-form :model="helpFormData" class="cf">
              <m-form-item
                class="mt-2"
                required
                label="Adjunto"
                label-width="80px"
                :span="24"
                prop="email"
              >
                <div class="el-upload__tip">
                  Puede informar su problema a través de imágenes o archivos de
                  video, etc.
                  <br />
                  Requisitos para la carga de archivos:
                  <br />
                  1. Tamaño recomendado: 750*750
                  <br />
                  2. Formatos requeridos: jpeg, png, jpg, y otros formatos de
                  imagen
                  <br />
                  3. No debe exceder los 10 MB
                </div>
              </m-form-item>
              <m-form-item class="mt-2"
                required
                label="&nbsp;"
                label-suffix=""
                label-width="80px"
                :span="24"
                prop="email">
                <el-upload
                  ref="upload"
                  class="upload-demo"
                  action="/upload"
                  :on-success="handleSuccess"
                  :on-remove="handleRemove"
                  :before-upload="beforeUpload"
                  :on-change="handleFileChange"
                  :file-list="fileList"
                  :auto-upload="false"
                  :limit="1"
                  :accept="'image/*,video/*'"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </m-form-item>
            </el-form>
          </div>
          <legend class="text-center mt-5">
            <button type="submit" class="btn btn-orange" @click="saveHelpInfo">
              Enviar
            </button>
          </legend>
        </div>
      </div>
    </section>

    <section class="pt-5 pb-5">
      <el-card>
        <h3>Preguntas más frecuentes</h3>
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title"> ¿Qué es One Prestamo? </template>
            <div>
              One Prestamo es una plataforma online de préstamos personales.
              Ofrecemos préstamos desde 50€ hasta 600€, con una duración de
              entre 7 y 30 días.
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="¿Qué requisitos debo cumplir para solicitar un préstamo en One Prestamo?"
          >
            <div>
              Residir en España. Tener entre 18 y 80 años. Disponer de una
              cuenta bancaria en España de la que seas titular.
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="¿Puedo utilizar el préstamo para cualquier propósito?"
          >
            <div>
              Puedes utilizar el préstamo para cualquiera de tus necesidades
              financieras. Nuestros clientes nos cuentan que usan el préstamo
              para emergencias médicas o dentales, celebraciones, imprevistos en
              el hogar, arreglo de vehículos, viajes, llegar a fin de mes, etc.
            </div>
          </el-collapse-item>
          <el-collapse-item title="¿Cómo solicito un préstamo?">
            <div>
              Hemos intentado mantener el proceso de solicitud muy simple, así
              que es muy sencillo. Sólo tienes que rellenar el formulario de
              solicitud, identificarte e identificar la cuenta de la que eres
              titular.
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="¿En base a qué criterios se toma la decisión sobre el préstamo?"
          >
            <div>
              Analizamos los datos (y los documentos si fuese necesario) que nos
              remites y en base a unas reglas, nuestro sistema toma una
              decisión. Por eso te requerimos que todos los datos que
              introduzcas sean veraces, ya que ello aumenta la probabilidad de
              concesión del préstamo.
            </div>
          </el-collapse-item>

          <el-collapse-item
            title="¿Qué documentos necesito para solicitar el préstamo?"
          >
            <div>
              Muy sencillo, sólo necesitas tener a mano una cuenta bancaria de
              la que seas titular, un teléfono móvil de tu propiedad y disponer
              de banca online en cualquier banco de España.
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="¿Cuánto tiempo se tarda en saber si mi crédito ha sido aprobado?"
          >
            <div>
              Sabemos que el tiempo es importante, así que nuestro proceso de
              aprobación tiene lugar en minutos.
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="¿Cuánto tiempo tardaré en recibir mi dinero?"
          >
            <div>
              Desde el momento en el que tu préstamo se aprueba, nosotros
              transferimos el dinero a tu cuenta de forma inmediata. El proceso
              es online y, normalmente, lo recibirás en cuestión de segundos.
              Sin embargo, pueden surgir incidencias puntuales con los bancos y
              en este caso posible que el pago se demore hasta 24/48 horas.
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="¿Necesito un número de cuenta para solicitar un préstamo?"
          >
            <div>
              Si, necesitas ser titular de un número de cuenta y de una tarjeta
              asociada a dicha cuenta.
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="¿Es seguro solicitar un préstamo en One Prestamo?"
          >
            <div>
              Si, es absolutamente seguro. Todos los datos que nos facilitas son
              encriptados y almacenados. Cumplimos escrupulosamente con la
              normativa de Protección de Datos vigente.
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="¿Puedo realizar el pago de mi préstamo anticipadamente?"
          >
            <div>
              Si deseas realizar el pago de tu préstamo anticipadamente, ponte
              en contacto con nuestros asesores de crédito,
              en service@oneprestamo.com. Ellos recalcularán los intereses de
              acuerdo con los días que hayas disfrutado el préstamo.
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pending: false,
      fileList: [],

      helpFormData: {
        name: "",
        phoneNo: "",
        content: "",
        email: "",
        attachment: "",
      },
    };
  },
  created() {},
  methods: {
    handleSuccess(response, file, fileList) {
      // 上传成功的回调函数，response为服务器返回的数据
      console.log("上传成功", response);
      // 这里可以处理上传成功后的逻辑，如展示图片或视频，或者获取Base64格式数据
      this.getFileBase64(file.raw).then((base64) => {
        this.helpFormData.attachment = base64;
      });
    },
    handleRemove() {
      this.helpFormData.attachment = "";
    },
    beforeUpload(file) {
      console.log(file);
      // 上传之前的钩子函数，可以在这里进行一些上传前的处理，如校验文件大小等
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        return this.$message.error("El tamaño del archivo cargado no puede exceder los 10 megabytes");
      }
      this.getFileBase64(file.raw).then((base64) => {
        console.log("====");
        this.helpFormData.attachment = base64;
      });
      return isLt10M;
    },
    handleFileChange(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        return this.$message.error("El tamaño del archivo cargado no puede exceder los 10 megabytes");
      }
      this.getFileBase64(file.raw).then((base64) => {
        console.log("====");
        this.helpFormData.attachment = base64;
      });
    },
    getFileBase64(file) {
      console.log(file);
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
      });
    },
    validSumbitData() {
      return new Promise((resolve, reject) => {
        const { name, phoneNo, email, content, attachment } = this.helpFormData;
        if (!name) reject("Complete toda la información");
        if (!phoneNo) reject("Complete toda la información");
        if (!email) reject("Complete toda la información");
        if (!this.$util.validateEmail(email)) reject("Proporciona la información correcta");
        if (!content) reject("Complete toda la información");
        if (!attachment) reject("Complete toda la información");
        resolve();
      });
    },
    saveHelpInfo() {
      if (this.pending) return;
      this.validSumbitData()
        .then(() => {
          this.pending = true;
          this.$http
            .post(this.$api.saveHelpInfo, this.helpFormData)
            .then((res) => {
              if (res.resultCode == 200) {
                this.helpFormData = {
                  name: "",
                  phoneNo: "",
                  content: "",
                  email: "",
                  attachment: "",
                };
                this.$refs["upload"].clearFiles();
                this.$notify({
                  title: "Consejos",
                  message: "Envío exitoso, nos comunicaremos con usted pronto.",
                  type: "success",
                });
              }
              this.pending = false;
            })
            .catch(() => {
              this.pending = false;
            });
        })
        .catch((err) => {
          this.$message.warning(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - 213px);
}
</style>